<template>
  <div class="file-preview-container">
    <!-- 未选择文件时的提示 -->
    <div v-if="!file" class="empty-state">
      <el-empty 
        description="请从左侧选择要预览的文件"
        :image-size="200"
      >
        <template #image>
          <el-icon :size="120" color="#909399">
            <DocumentCopy />
          </el-icon>
        </template>
      </el-empty>
    </div>

    <!-- 不支持的文件格式 -->
    <div v-else-if="!isSupported" class="unsupported-state">
      <el-result
        icon="error"
        title="不支持的文件格式"
        :sub-title="`文件 ${file.name} 的格式暂不支持预览`"
      >
        <template #extra>
          <el-button 
            type="primary" 
            :icon="Download"
            @click="downloadFile"
          >
            下载文件
          </el-button>
        </template>
      </el-result>
    </div>

    <!-- 预览组件 -->
    <component 
      v-else
      :is="previewComponent" 
      :file="file"
      :key="file.uid"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { DocumentCopy, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getFileType, getPreviewComponent, isFileSupported } from '../utils/fileHelper'

// 导入所有预览组件
import ImagePreview from './previews/ImagePreview.vue'
import PdfPreview from './previews/PdfPreview.vue'
import DocxPreview from './previews/DocxPreview.vue'
import ExcelPreview from './previews/ExcelPreview.vue'
import PptPreview from './previews/PptPreview.vue'
import MarkdownPreview from './previews/MarkdownPreview.vue'
import TextPreview from './previews/TextPreview.vue'

const props = defineProps({
  file: {
    type: Object,
    default: null
  }
})

// 检查文件是否支持预览
const isSupported = computed(() => {
  if (!props.file) return false
  return isFileSupported(props.file.name)
})

// 获取预览组件
const previewComponent = computed(() => {
  if (!props.file) return null
  
  const fileType = getFileType(props.file.name)
  const componentName = getPreviewComponent(fileType)
  
  const componentMap = {
    ImagePreview,
    PdfPreview,
    DocxPreview,
    ExcelPreview,
    PptPreview,
    MarkdownPreview,
    TextPreview
  }
  
  return componentMap[componentName] || null
})

// 下载文件
const downloadFile = () => {
  try {
    const url = URL.createObjectURL(props.file.raw)
    const link = document.createElement('a')
    link.href = url
    link.download = props.file.name
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
    ElMessage.success('文件下载成功')
  } catch (error) {
    console.error('文件下载失败:', error)
    ElMessage.error('文件下载失败')
  }
}
</script>

<style scoped>
.file-preview-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  overflow: hidden;
}

.empty-state {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unsupported-state {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

:deep(.el-empty__description) {
  font-size: 16px;
  color: #909399;
}
</style>

